<template>
  <ul class="nav-box">
    <li>
      <img src="../assets/01.png" alt="">
      嗨购超市
    </li>
    <li>
      <img src="../assets/02.png" alt="">
      数码电器
    </li>
    <li>
      <img src="../assets/03.png" alt="">
      嗨购服饰
    </li>
    <li>
      <img src="../assets/04.png" alt="">
      嗨购生鲜
    </li>
    <li>
      <img src="../assets/05.png" alt="">
      嗨购到家
    </li>
    <li>
      <img src="../assets/06.png" alt="">
      充值缴费
    </li>
    <li>
      <img src="../assets/07.png" alt="">
      领券
    </li>
    <li>
      <img src="../assets/08.png" alt="">
      9.9元拼
    </li>
    <li>
      <img src="../assets/09.png" alt="">
      领金贴
    </li>
    <li>
      <img src="../assets/10.png" alt="">
      plus会员
    </li>
  </ul>
</template>

<script>
export default {
  name: "NavBar",
  // data() {
  //   return {
  //     sorts: [
  //       {
  //         name: "嗨购超市",
  //         src: "D:/千峰/三阶段（vue）/day07/project/src/assets/01.png",
  //       },
  //       {
  //         name: "数码电器",
  //         src: "D:/千峰/三阶段（vue）/day07/project/src/assets/02.png",
  //       },
  //       {
  //         name: "嗨购服饰",
  //         src: "D:/千峰/三阶段（vue）/day07/project/src/assets/03.png",
  //       },
  //       {
  //         name: "嗨购生鲜",
  //         src: "D:/千峰/三阶段（vue）/day07/project/src/assets/04.png",
  //       },
  //       {
  //         name: "嗨购到家",
  //         src: "D:/千峰/三阶段（vue）/day07/project/src/assets/05.png",
  //       },
  //       {
  //         name: "充值缴费",
  //         src: "D:/千峰/三阶段（vue）/day07/project/src/assets/06.png",
  //       },
  //       {
  //         name: "9.9元拼",
  //         src: "D:/千峰/三阶段（vue）/day07/project/src/assets/07.png",
  //       },
  //       {
  //         name: "领券",
  //         src: "D:/千峰/三阶段（vue）/day07/project/src/assets/08.png",
  //       },
  //       {
  //         name: "领金贴",
  //         src: "D:/千峰/三阶段（vue）/day07/project/src/assets/09.png",
  //       },
  //       {
  //         name: "plus会员",
  //         src: "D:/千峰/三阶段（vue）/day07/project/src/assets/10.png",
  //       },
  //     ],
  //   };
  // },
};
</script>

<style scoped>
.nav-box{
  display: flex;
  justify-content: space-around;
  list-style: none;
  flex-wrap: wrap;
  font-size: .75rem;
  text-align: center;
  background: white;
  height: 9.375rem;
}
.nav-box li{
  width: 20%;
  height: 4.6875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.nav-box li img{
  width: 2.5rem;
  margin-bottom: .3125rem;
}
</style>